<script src="{{asset('admin_assets/zego_assets/js/jquery.min.js')}}"></script>
<script src="{{asset('admin_assets/zego_assets/js/sweetalert.min.js')}}"></script>
<script src="{{asset('admin_assets/zego_assets/js/express_sdk/ZegoExpressWebRTC.js')}}"></script>


<div class="row">
    <div class="col-md-8" style="position: relative;">
        <video controls id="publishVideo" autoplay muted playsinline style="width: 100%; min-height: 450px;"></video>
        <button class="btn btn-primary start-meeting" id="startPublishing" style="position:absolute; left: 44%; top: 200px;height: 60px;">
            <i class="feather icon-video"></i>&nbsp;&nbsp;&nbsp;开始会议
        </button>


{{--        <button id="mikeClose">麦克风静音</button>--}}

        <div id="mikeClose" style="font-size: 30px; width: 50px; line-height: 50px; float: left; text-align: center;background-color: #ffffff; border-radius: 25px; margin-top: 10px;">
            <i class="feather icon-mic"></i>
        </div>

        <button class="btn btn-danger" id="stopLive" style="float: right; margin-top: 10px; display: none;">
            <i class="feather icon-video-off"></i>&nbsp;&nbsp;&nbsp;结束会议
        </button>

        <div class="paly-video">
{{--            <video controls id="playVideo" autoplay playsinline style="display: none;"></video>--}}
        </div>

    </div>


    <div class="col-md-4" style="max-height: 600px; overflow-y: auto;">
        <div class="table-responsive table-wrapper table-collapse" style="margin-top: 0;">
            <table class="custom-data-table dataTable table dt-checkboxes-select" id="grid-table">
                <thead>
                    <tr>
                        <th>当前参与人数：<span id="meeting_user_num">0</span>/{{ $roomInfo->room_num_limit }}</th>
                        <th style="text-align: center;"><i class="feather icon-mic"></i></th>
                        <th style="text-align: center;">踢出</th>
                    </tr>
                </thead>

                <tbody id="meeting_user_list"></tbody>
            </table>

            <div style="text-align: center;">
                <button class="btn btn-success invite-user" style="margin-bottom: 10px;" data-clipboard-text="{{ $inviteTap }}">邀请成员</button>
            </div>
        </div>
    </div>
</div>


<script src="{{asset('admin_assets/zego_assets/js/jquery.i18n.properties.min.js')}}"></script>
<script src="{{asset('admin_assets/zego_assets/js/jquery.slimscroll.min.js')}}"></script>
<script src="{{asset('admin_assets/zego_assets/js/bootstrap.min.js')}}"></script>

<script src="{{asset('admin_assets/zego_assets/js/custom.js')}}"></script>
<script src="{{asset('admin_assets/zego_assets/js/vconsole.min.js')}}"></script>

<script src="{{asset('admin_assets/meeting/js/clipboard.min.js')}}"></script>
<script>
    let meetingRoomId = '{{ $roomInfo->id }}';
    let appID = parseInt('{{ $appId }}');
    let server = '{{ $server }}';
    let userID = '{{ $roomInfo->room_user_no }}';
    let token = '{{ $roomInfo->token }}';
    let roomID = '{{ $roomInfo->room_no }}';
    let publishVideoStreamid = '{{ $roomInfo->windows_publish_stream_id }}';
    let publishAudioStreamid = '{{ $roomInfo->audio_publish_stream_id }}'; // 麦克风推流ID

    // 获得房间用户
    function get_room_user() {
        $.post('{{ url('admin/ajax_get_room_user') }}', {
            room_id: roomID,
            _token: '{{ csrf_token() }}'
        }, function (data) {
            if (data.code == 200) {
                $('#meeting_user_num').html(data.data.user_num);
                var list_html = '';
                $.each(data.data.user_list, function(index, item){
                    list_html += '<tr>';
                    list_html += '  <td><img src="' + item.user_info.head_portrait + '" style="float: left;width:50px; height:50px;cursor:pointer;margin-right:10px;" class="img img-thumbnail"><div style="line-height: 30px;">' + item.user_info.user_name + '</div><div style="font-size: 12px; color: #666; line-height: 20px;">'+ item.last_login_time +'进入</div></td>';
                    if (item.mike_status == 1) {
                        list_html += '  <td align="center" style="color: #999999;"><i class="feather icon-mic"></i>' + '</td>';
                    } else {
                        list_html += '  <td align="center" style="color: #999999;"><i class="feather icon-mic-off"></i>' + '</td>';
                    }
                    list_html += '  <td align="center" style="color: #ea5455;" onclick="out_user(\''+item.room_user_no+'\', \''+item.audio_publish_stream_id+'\')"><i class="feather icon-log-out"></i>' + '</td>';
                    list_html += '</tr>';
                });

                $('#meeting_user_list').html(list_html);
            }
        }, 'json');
    }

    // 踢出用户
    function out_user(user_no, stream_id) {
        swal({
            title: '确认踢出',
            text: '',
            icon: 'warning',
            dangerMode: true,
            buttons: ["取消", "确认"],
        })
        .then(async function (willDelete) {

            if (willDelete) {
                $.post('{{ url('admin/ajax_out_user') }}', {
                    room_id: roomID,
                    user_no: user_no,
                    _token: '{{ csrf_token() }}'
                }, function (data) {
                    if (data.code == 200) {
                        // 切断语音流
                        stopPlayingStream(stream_id);
                        swal ('踢出成功', '', 'success');
                    } else {
                        swal (data.message, '', 'error');
                    }
                }, 'json');
            }
        });
    }

    // 结束会议
    function end_meeting() {
        $.post('{{ url('admin/ajax_end_meeting') }}', {
            meeting_room_id: meetingRoomId,
            _token: '{{ csrf_token() }}'
        }, function (data) {

        }, 'json');
    }

    // 邀请成员
    var clipboard = new Clipboard('.invite-user');
    clipboard.on('success', function(e) {
        swal ('已成功复制口令', '粘贴发给好友，使用口令打开乡通APP即可加入会议。', 'success');
        // console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });

    get_room_user();
    var user_list_timer = "";
    clearInterval(user_list_timer);
    user_list_timer = setInterval(function(){
        get_room_user();
    }, 2000);

    // 关闭页面结束会议
    window.onbeforeunload = function(event) {
        end_meeting()
    };
</script>
<script src="{{asset('admin_assets/meeting/js/index.js')}}"></script>
